<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left,.right,.middle{ float: left;}
        .left,.right{ border: 1px solid #eee; width: 100px; height: 200px; line-height: 28px; text-align: center;}
        .active{ background-color: #eee;}
    </style>
    <script>
        window.onload = function(){
            document.querySelectorAll('.left>div').forEach(function(dom){
                dom.onclick = function(){
                    // 当前点击的增加active样式
                    // 先将具备active样式的  移除样式
                    if(document.querySelector('.left>.active')){
                        document.querySelector('.left>.active').className = '';
                    }
                    
                    // 当前点击的添加
                    this.className = 'active';
                }
            })
            // 右移
            document.querySelector('input').onclick = function(){
                // 先将右侧的所有的元素移除active
                document.querySelectorAll('.right>div').forEach(function(dom){
                    dom.className = '';
                })
                // 将左侧有active的元素的移动到右侧
                document.querySelector('.right').appendChild(document.querySelector('.left>.active'));
            }

        }

    </script>
</head>
<body>
    <div class="left">
        <div class="active">张三</div>
        <div>李四</div>
        <div>王五</div>
        <div>赵六</div>
        <div>孙七</div>
        <div>王八</div>
    </div>
    <div class="middle">
        <input type="button" value=">" />
        <input type="button" value="<" />
    </div>
    <div class="right">
        
    </div>
</body>
</html>
